<template>
     <el-dialog :draggable=true :model-value="dialogVisible" title="请输入服务器信息" width="500" @close="handleClose">
      <template #footer>
        <div class="dialog-footer">
          <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            class="demo-ruleForm"
            label-width="auto"
            status-icon
            style="max-width: 600px"
          >
            <el-form-item label="服务器地址" prop="serverIp">
              <el-input v-model="ruleForm.serverIp" />
            </el-form-item>
            <el-form-item label="服务器端口" prop="port">
              <el-input v-model="ruleForm.port" />
            </el-form-item>
            <el-form-item label="用户名" prop="serverUsername">
              <el-input v-model="ruleForm.serverUsername" />
            </el-form-item>
            <el-form-item label="密码" prop="serverPassword">
              <el-input v-model="ruleForm.serverPassword" type="password"/>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="submitForm(ruleFormRef)">
                提交
              </el-button>
              <el-button @click="resetForm(ruleFormRef)">
                重置
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </template>
    </el-dialog>
   
  </template>
  
<script lang="ts" setup>
import { reactive,ref, defineProps, withDefaults ,defineEmits} from 'vue'
import type { FormInstance } from 'element-plus'
import { addServer } from '@/api/webShell/ServerList'

const emit = defineEmits(['update:dialogVisible', "close"])

const ruleFormRef = ref<FormInstance>()
  const ruleForm = reactive({
  serverIp:'',
  serverPassword: '',
  serverUsername:'',
  port:22,
  userId:1,
  id:null
})

const props = withDefaults(
  defineProps<
  { 
      dialogVisible: boolean 
  }>(), 
  {
      dialogVisible: false
})

function handleClose() {
  emit('update:dialogVisible', false)
  emit("close")
}

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      console.log(ruleForm)
      addServer(ruleForm).then(res => {
        console.log(res)
        emit('update:dialogVisible', false)
        emit("close")
      })
    } else {
      console.log('error submit!')
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
 
  </script>